<template>
    <el-dialog v-model="show" :title="props.type == 1 ? '转账汇款 ' : '收款'" width="30%" align-center @close="handleClose">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
            status-icon>

            <el-row :gutter="20">
                <el-col :span="props.type == 1 ? 12 : 24">
                    <el-form-item :label="props.type == 1 ? '收款银行:' : '付款方名称:'" prop="name">
                        <el-input v-model="ruleForm.name" :placeholder="props.type == 1 ? '请输入收款银行' : '请输入付款方名称'" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="props.type == 1">
                    <el-form-item label="收款账号:" prop="account">
                        <el-input v-model="ruleForm.account" placeholder="请输入收款账号" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="支付日期:" prop="date">
                        <el-date-picker v-model="ruleForm.date" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
                            type="date" placeholder="请选择日期" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="支出账号:">
                        {{ props.initList.name }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用途/摘要:">
                        {{ props.type == 1 ? '外部转账' : '外部收款' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="付款金额:" prop="paymentAmount">
                        <el-input v-model.number="ruleForm.paymentAmount" placeholder="请输入付款金额" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注:" prop="remark">
                        <el-input v-model="ruleForm.remark" placeholder="请输入备注" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="凭证上传:" prop="fileUrl">
                        <el-upload ref="designSketchRef" :show-file-list="false" drag :action="uploadImgUrl"
                            :headers="headers" multiple :auto-upload="true" :on-success="handleDesignSketchSuccess"
                            :before-upload="beforedeSignSketchUpload">
                            <img style="height: 100px;" v-if="ruleForm.fileUrl" :src="ruleForm.fileUrl" />
                            <template v-else>
                                <div style="padding-top: 10px;">
                                    <uploadStyle type="1" icon="PictureFilled" />
                                </div>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit(ruleFormRef)">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules, UploadProps } from 'element-plus'
import { globalHeaders } from "@/utils/request";
import uploadStyle from '@/views/productManagement/designerTakesOrders/components/uploadStyle.vue';
import { addFinancePaymentApi } from '@/api/sj/financialManagement/paymentCard/index';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList', 'type']);
const emits = defineEmits(['submit', 'close']);

const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(baseUrl + "/resource/oss/upload");
const headers = ref(globalHeaders);

const show = ref(false);
const dialogVisible = ref();


watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

interface RuleForm {
    name: string
    account: string
    date: string
    paymentAmount: number | null
    fileUrl: string
    remark: string
};
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: '',
    account: '',
    date: '',
    paymentAmount: null,
    fileUrl: '',
    remark: '',
})

const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    account: [
        { required: props.type == 1, message: '请输入收款账号', trigger: 'blur' },
    ],
    date: [
        {
            required: true,
            message: '请选择支付日期',
            trigger: ['blur', 'change'],
        },
    ],
    paymentAmount: [
        { required: true, message: '请输入付款金额', trigger: 'blur' },
        { type: 'number', min: 0, message: '请输入金额并且不能小于0', trigger: 'blur' },
    ],
    fileUrl: [
        { required: true, message: '请上传凭证', trigger: 'blur' },
    ],
});

/** 上传效果图 */
const handleDesignSketchSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    dialogVisible.value.close()
    ruleForm.fileUrl = response.data.url
};

const beforedeSignSketchUpload: UploadProps['beforeUpload'] = () => {
    dialogVisible.value = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
};

const handleSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {

            const query = {
                purposeType: props.type == 1 ? 1 : 2,
                paymentType: props.type,
                collectCardId: props.initList.id,
                ...ruleForm
            };

            try {
                const { code } = await addFinancePaymentApi(query);

                if (code == 200) {
                    proxy?.$modal.msgSuccess('操作成功');
                    emits('submit', true);

                    handleClose();
                }
            } catch (error) {

            }
        } else {
            console.log('error submit!', fields)
        }
    })
}


const handleClose = () => {
    ruleFormRef.value?.resetFields();
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped>
::v-deep .el-upload-dragger {
    padding: 0px 4px !important;
    height: 100px !important;
    width: 260px;
}
</style>